/**
 * @author shaosong
 * @description 颜色选择器
 */


import React, { useEffect, useState } from 'react';
import { ColorPicker } from 'antd';
import type { ColorPickerProps, GetProp } from 'antd';
import './index.less';

type Color = GetProp<ColorPickerProps, 'value'>;

class ColorCardProps {
  title: React.ReactNode | string;
  color = '#1677ff' as Color;
  disabled?= false as boolean;
  changeColor?: (value: Color, hex: string) => void;
}

const ColorCard: React.FC<ColorCardProps> = (props) => {
  
  return <div className='components-color-card'>
    <span className='label'>{props.title}</span>
    <ColorPicker
      value={props.color || '#1677ff'}
      showText
      onChange={props?.changeColor}
      style={{ width: '160px', justifyContent: 'left', paddingLeft: '16px' }}
      disabled={props?.disabled}
    />
  </div>;
};

export default ColorCard;